// 使用入口函数的目的是加强代码健壮性，后续有人移动js文件书写位置，不产生影响
$(function () {
    // 需求一：点击a链接显示、隐藏盒子
    $('#loginBox a').on('click', function () {
        $('#loginBox').hide();
        $('#regBox').show();
    });

    $('#regBox').on('click', 'a', function () {
        $('#loginBox').show();
        $('#regBox').hide();
    });

    // 需求二：定义规则
    // console.log(layui);  // 导入layui.all.js，就会产生一个变量layui
    let form = layui.form;  // 将layui里的form属性导出，用变量接收
    // 定义校验规则，使用的是form.verify(),参数是对象，属性是校验名称，值是校验规则
    form.verify({
        // 值有两种类型，函数和数组
        username: [
            /^[a-zA-Z0-9]{1,10}$/
            , '用户名必须1到10位，且不能出现空格'
        ],
        pwd: [
            /^[a-zA-Z0-9]{6,12}$/
            , '密码必须6到12位，且不能出现空格'
        ],
        // 确认密码的校验规则
        // value代表值，item代表所属DOM元素
        rePwd: function (value, item) {
            // 判断是否与密码的值相同
            let pwd = $('#regBox input[name=password]').val();
            if (pwd !== value) {
                return '两次密码输入不一致'
            }
        }
    });

    // 需求三：完成注册功能，发送Ajax请求
    let layer = layui.layer;
    $('#formReg').on('submit', function (e) {
        // 阻止表单的默认提交行为，使用axios中的Ajax异步提交
        e.preventDefault();
        // 使用axios中的Ajax提交
        axios({
            method: 'POST',
            url: '/api/reguser',
            // jQuery中的ajax请求参数可以是string，object，array，它的content-type头信息是固定的，会自动解析成字符串，是application/x-www-form-URIcencoded,类型如果是formdata则设置两个false，processData：false，contentType：false
            // axios中，参数类型不同，头信息也不同，如果是字符串类型，则content-type是application/x-www-form-URIcencoded，如果是对象类型，content-type是application/json，如果是FormData对象，conent-type是multipart/form-data
            // 不要传递对象类型，因为对象类型头信息设置的是application/json，目前接口文档不支持
            // content- type: application / JSON;目前接口文档不支持
            // 不能设置为params,也不可以使用serializeArray()
            data: $(this).serialize()
        }).then(function (res) {
            // console.log(res.data);
            if (res.data.status !== 0) {
                return layer.msg(res.data.message, { icon: 5 });
            }
            // alert('恭喜您，注册成功！');
            layer.msg('恭喜您，注册成功！', { icon: 6 });
            // 切换到登录表单
            $('#regBox a').click();
            // 清空表单 - 原生js中，表单的reset()
            $('#formReg')[0].reset();
        });
    });

    // 需求四：完成登录功能，发送Ajax请求
    $('#formLogin').on('submit', function (e) {
        e.preventDefault();
        axios({
            method: 'POST',
            url: '/api/login',
            data: $(this).serialize()
        }).then(function (res) {
            // console.log(res.data);
            if (res.data.status !== 0) {
                return layer.msg(res.data.message, { icon: 5 });
            }
            // 成功提示
            layer.msg('登录成功！', { icon: 6 });
            // 保存token，用于身份认证
            localStorage.setItem('token', res.data.token);
            // 页面跳转
            location.href = '/index.html';
        });
    });
});